<template>
  <div class="list">
    <el-card>
      <!-- 添加学生按钮 -->
      <el-button type="primary" @click="dialogVisible = true"
        >添加学生</el-button
      >
      <el-button type="primary" @click="clear">注销</el-button>
      <!-- 学生列表区域 -->
      <el-table :data="studentList">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="班级" prop="class"></el-table-column>
        <el-table-column label="数学" prop="mat"></el-table-column>
        <el-table-column label="语文" prop="chn"></el-table-column>
        <el-table-column label="英语" prop="eng"></el-table-column>
        <el-table-column label="平均分">
          <template scope="scope">
            {{ aver(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="del(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 操作对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="form.class" placeholder="请选择所在班级">
            <el-option label="高职一班" value="高职一班"></el-option>
            <el-option label="高职二班" value="高职二班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数学成绩">
          <el-input v-model="form.mat"></el-input>
        </el-form-item>
        <el-form-item label="语文成绩">
          <el-input v-model="form.chn"></el-input>
        </el-form-item>
        <el-form-item label="英语成绩">
          <el-input v-model="form.eng"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine(form)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 列表数据
      studentList: [],
      //   控制对话框展示 隐藏
      dialogVisible: false,
      //   对话框表单数据
      form: {},
      //   公用id
      allId: "",
    };
  },
  created() {
    this.getStudentList();
  },
  methods: {
    // 获取列表数据
    async getStudentList() {
      await this.axios
        .get("http://localhost:3000/student")
        .then((res) => {
          this.studentList = res.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   计算平均分
    aver(i) {
      let average =
        (this.studentList[i].mat +
          this.studentList[i].chn +
          this.studentList[i].eng) /
        3;
      return average.toFixed(2);
    },
    // 点击编辑
    edit(i, e) {
      this.dialogVisible = true;
      this.form = Object.assign({},e,"5252");
      this.allId = i;
    },
    // 点击确定
    async determine(e) {
      this.form.mat = parseInt(this.form.mat);
      this.form.chn = parseInt(this.form.chn);
      this.form.eng = parseInt(this.form.eng);
        // this.getStudentList();
      if (!this.allId) {
        // this.studentList.push(e);
        await this.axios.post("http://localhost:3000/student", { student: e });
        this.getStudentList();
      } else {
        // this.studentList.splice(this.allId, 1, e);
        await this.axios.put(`http://localhost:3000/student/${this.allId}`, {
          student: e,
        });
        this.getStudentList();
      }
      this.dialogVisible = false;
      this.form = {};
    },
    // 点击删除
    del(i) {
      this.$confirm("此操作将永远删除此学生，是否继续？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // this.studentList.splice(i, 1);
          await this.axios.delete(`http://localhost:3000/student/${i}`);
          this.getStudentList();
          console.log(i);
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 点击注销
    clear() {
      localStorage.clear();
      console.log(localStorage.getItem("usr"));
      location.reload();
    },
  },
};
</script>